import { useEffect, useState, useMemo, useRef } from "react";
import axios from 'axios';
import { SearchOutlined, RollbackOutlined, LoadingOutlined, PlusOutlined, DeleteTwoTone } from '@ant-design/icons'
import { ShortPassword } from "@nutui/nutui-react";
import { Tabs } from 'antd';
import moment from 'moment';
const Money = () => {
    const [data, setData] = useState([])
    const show = () => {
        axios.get('http://localhost:3000/ljy/jiao').then(res => {
            console.log(res.data)
            setData(res.data)
        })
    }
    useEffect(() => {
        show()
    }, [])
    const [time, setTime] = useState('')
    const [zhifu, setZhiFu] = useState('')
    const [name, setName] = useState('')
    const [max, setMax] = useState('')
    const [min, setMin] = useState('')
    //视口高度
    const [height, setheight] = useState(100)
    //单个元素高度
    const [onHeight, setonHeight] = useState(25)
    //最大容积
    const [maxHeight, setmaxHeight] = useState(0)
    //滚动事件
    const scrollshu = useRef(null)
    const [start, setStart] = useState(0);
    //滚动的结束位置
    const [end, setEnd] = useState(0);
    useEffect(() => {
        setmaxHeight(~~(height / onHeight))
        setStart()
        show()
    }, [])

    //上空白
    const shang = useMemo(() => {
        return start * onHeight
    },)
    //下空白
    const xia = useMemo(() => {
        return (data.length - end) * onHeight
    })
    const handleScroll = () => {
        console.log('滚动距离顶的', scrollshu.current.scrollTop);
        setStart(~~(scrollshu.current.scrollTop / onHeight));
    }
    const endIndex = useMemo(() => {
        //开始位置+最大容积数量
        let endindex = start + maxHeight;
        //如果最后一个元素不存在
        // if (!data[endindex]) {
        //   endindex = data.length - 1
        // }
        return endindex
    })
    const showList = useMemo(() => {
        console.log('showList', data);
        return data.slice(start, endIndex)
    })
    return (
        <div className="money">
            <div style={{ position: "relative", right: '5rem', top: "1rem" }}>全部订单</div>
            <div style={{ display: "flex", position: "relative", right: '5rem', top: "1.5rem" }}>
                <div >
                    <div className="jiao">
                     支付方式:<select name="" id="" onChange={(e) => setZhiFu(e.target.value)} >
                            <option value="">请选择</option>
                            <option value="支付宝">支付宝</option>
                            <option value="微信">微信</option>
                            <option value="银行卡">银行卡</option>
                        </select>
                    </div>
                    <div className="jiao">
                      下单日期：<input type="date" onChange={(e) => setTime(e.target.value)} style={{ marginLeft: "0.5rem", marginRight: "1rem", marginBottom: "1rem" }} />
                    </div>
                </div>
                <div className="jiao">
                    <div style={{ marginLeft: "0.5rem", marginRight: "1rem", marginBottom: "1rem" }}>
                        实付金额：<input type="text" placeholder="最低价格" onChange={(e) => setMax(e.target.value)} />-
                        <input type="text" placeholder="最高价格" onChange={(e) => setMin(e.target.value)} />
                    </div>
                    <div style={{ marginLeft: "0.5rem", marginRight: "1rem", marginBottom: "1rem" }}>
                        <input type="text" placeholder="请输入关键字" onChange={(e) => setName(e.target.value)} />
                        <span><button style={{
                            width: '1rem', height: "1rem",
                            borderRadius: '0.2rem', backgroundColor: '#3DD4A7', border: 'none', marginLeft: "0.5rem"
                        }}><SearchOutlined onClick={() => submit()} /></button></span>
                        <span><button style={{
                            width: '1rem', height: "1rem",
                            borderRadius: '0.2rem', marginLeft: "0.5rem", border: 'none'
                        }}><RollbackOutlined /></button></span>
                    </div>
                    <div>
                    </div>
                    <div>
                        <div className='scroll1' onScroll={handleScroll} ref={scrollshu}>
                            <div style={{ paddingTop: shang + 'px', paddingBottom: xia + 'px' }}>
                            <div>
                                            <Tabs defaultActiveKey="1">
                                                <Tabs.TabPane tab="全部" key="1">
                                                </Tabs.TabPane>
                                                <Tabs.TabPane tab="待付款" key="2">
                                                </Tabs.TabPane>
                                                <Tabs.TabPane tab="待接单" key="3">
                                                </Tabs.TabPane>
                                                <Tabs.TabPane tab="待服务" key="4">
                                                </Tabs.TabPane>
                                                <Tabs.TabPane tab="已完成" key="5">
                                                </Tabs.TabPane>
                                                <Tabs.TabPane tab="退款退款" key="6">
                                                </Tabs.TabPane>
                                                <Tabs.TabPane tab="已关闭" key="7">
                                                </Tabs.TabPane>
                                            </Tabs>
                                        </div>
                                <table className='table2' >
                                    <tr style={{ fontSize: '0.5rem' }}>
                                        <td>商品信息</td>
                                        <td>价格(元)</td>
                                        <td>买家</td>
                                        <td>订单状态</td>
                                        <td>支付方式</td>
                                        <td>操作</td>
                                    </tr>
                                    {
                                        showList.map((item) => {
                                            return <tr className='div1'>
                                                <td><img src={item.img} alt="" /><span style={{ position: 'relative', bottom: '1rem', left: '0.5rem' }}>{item.title}</span></td>
                                                <td>{item.price}</td>
                                                <td>
                                                    <div style={{ display: "flex" }}>
                                                        <div><img src={item.tou} alt="" style={{ borderRadius: '50%', }} /></div>
                                                        <div>
                                                            <div>{item.name}</div>
                                                            <div>{item.phone}</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    {item.state}
                                                </td>
                                                <td>
                                                    {item.zhi}
                                                </td>
                                                <td>
                                                    <button>订单详情</button>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                        })
                                    }
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Money